<%@page import="javax.print.attribute.standard.PagesPerMinute"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/style/style.css">
<script>
    	var withId = false;
        var urlPrefix = "${pageContext.request.contextPath}/admin/panel/order";
        var detailView = "/view/";
    </script>
<script src="${pageContext.request.contextPath}/static/script/manger.js"></script>
<script>
    	var helpMessage = "然而并没有帮助👻";
    	function helpOnClick(){
    		alert(helpMessage);
    	}
</script>
<title>订单管理</title>
</head>
<body>
	<nav class="aho-top-bar aho-box-shadow-mid">
		<section class="main">
			<span>BookStore后台管理系统</span>
		</section>
		<section class="toolbar">
			<a class="toolbar-action" onclick="helpOnClick()" href="#"> <span
				class="aho-icon aho-icon-help"></span>
			</a> <a href="${pageContext.request.contextPath}/admin/logout"
				class="toolbar-action" href="#"> <span
				class="aho-icon aho-icon-logout"></span>
			</a>
		</section>
	</nav>
	<main class="aho-main flex">
		<aside class="aho-aside">
			<div class="profile">
				<img class="aho-img-round"
					src="${pageContext.request.contextPath}/static/imgs/simple_img.png"
					alt="" srcset=""> <span class="user-id"><c:if
						test="${account.nick != null}">${account.nick}</c:if>
					<c:if test="${account.nick == null}">"NULL"</c:if></span>
			</div>
			<div class="aho-divide"></div>
			<div class="actions">
				<div class="list">
					<a href="${pageContext.request.contextPath}/admin/panel"
						class="list-item"> <svg xmlns="http://www.w3.org/2000/svg"
							height="24px" viewBox="0 0 24 24" width="24px"
							class="aho-icon aho-sm-gap aho-svg-icon">
							<path d="M0 0h24v24H0V0z" fill="none" />
							<path
								d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /></svg>
						<span>欢迎</span>
					</a> <a href="${pageContext.request.contextPath}/admin/panel/user"
						class="list-item"> <svg xmlns="http://www.w3.org/2000/svg"
							height="24px" viewBox="0 0 24 24" width="24px"
							class="aho-icon aho-sm-gap aho-svg-icon">
							<path d="M0 0h24v24H0V0z" fill="none" />
							<path
								d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.22 0 .41.1.55.25.12.13.2.31.2.5 0 .41-.34.75-.75.75s-.75-.34-.75-.75c0-.19.08-.37.2-.5.14-.15.33-.25.55-.25zM19 19H5V5h14v14zM12 6c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-6 6.47V18h12v-1.53c0-2.5-3.97-3.58-6-3.58s-6 1.07-6 3.58zM8.31 16c.69-.56 2.38-1.12 3.69-1.12s3.01.56 3.69 1.12H8.31z" /></svg>
						用户管理
					</a> <a href="${pageContext.request.contextPath}/admin/panel/book"
						class="list-item"> <svg xmlns="http://www.w3.org/2000/svg"
							enable-background="new 0 0 24 24" height="24px"
							class="aho-icon aho-sm-gap aho-svg-icon" viewBox="0 0 24 24"
							width="24px">
							<rect fill="none" height="24" width="24" />
							<path
								d="M5,10h14v2h2V6c0-1.1-0.9-2-2-2h-1V2h-2v2H8V2H6v2H5C3.89,4,3.01,4.9,3.01,6L3,20c0,1.1,0.89,2,2,2h7v-2H5V10z M5,6h14v2H5 V6z M22.84,16.28l-0.71,0.71l-2.12-2.12l0.71-0.71c0.39-0.39,1.02-0.39,1.41,0l0.71,0.71C23.23,15.26,23.23,15.89,22.84,16.28z M19.3,15.58l2.12,2.12l-5.3,5.3H14v-2.12L19.3,15.58z" /></svg>
						图书管理
					</a> <a href="${pageContext.request.contextPath}/admin/panel/order"
						class="list-item" checked> <svg
							xmlns="http://www.w3.org/2000/svg" height="24px"
							viewBox="0 0 24 24" width="24px"
							class="aho-icon aho-sm-gap aho-svg-icon">
							<path d="M0 0h24v24H0V0z" fill="none" />
							<path
								d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 4h7l5 5v8.58l-1.84-1.84c1.28-1.94 1.07-4.57-.64-6.28C14.55 8.49 13.28 8 12 8c-1.28 0-2.55.49-3.53 1.46-1.95 1.95-1.95 5.11 0 7.05.97.97 2.25 1.46 3.53 1.46.96 0 1.92-.28 2.75-.83L17.6 20H6V4zm8.11 11.1c-.56.56-1.31.88-2.11.88s-1.55-.31-2.11-.88c-.56-.56-.88-1.31-.88-2.11s.31-1.55.88-2.11c.56-.57 1.31-.88 2.11-.88s1.55.31 2.11.88c.56.56.88 1.31.88 2.11s-.31 1.55-.88 2.11z" /></svg>
						订单管理
					</a>
				</div>
			</div>
		</aside>
		<section class="content">
			<div class="book-manger aho-center">
				<h1>订单管理</h1>
				<div class="card">
					<div class="aho-search-bar">
						<form id="search-form" action="order" method="GET">
							<input type="hidden" id="order" name="order"
								value="${queryOption.order}"> <input type="hidden"
								id="dir" name="dir" value="${queryOption.dir}">
							<div class="search">
								<input type="text" name="query" value="${queryOption.query}">
								<button class="aho-bt">
									<svg xmlns="http://www.w3.org/2000/svg" height="24px"
										viewBox="0 0 24 24" width="24px" fill="#FFFFFF">
										<path d="M0 0h24v24H0V0z" fill="none" />
										<path
											d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>
									<span>搜索</span>
								</button>
							</div>
							<div class="options">
								<label for="orderNo">订单编号</label> <input type="radio"
									name="queryType" id="orderNo" value="orderNo"
									<c:if test='${queryOption.queryType==null || queryOption.queryType == "orderNo"}'>checked</c:if>>
								<label for="userId">用户ID</label> <input type="radio"
									name="queryType" id="userId" value="userId"
									<c:if test='${queryOption.queryType == "userId"}'>checked</c:if>>
								<label for="nick">昵称</label> <input type="radio"
									name="queryType" id="nick" value="nick"
									<c:if test='${queryOption.queryType == "nick"}'>checked</c:if>>
								<label for="id">id</label> <input type="radio" name="queryType"
									id="id" value="id"
									<c:if test='${queryOption.queryType == "id"}'>checked</c:if>><br>

							</div>
						</form>
					</div>
					<div class="tools">
						<button class="simple-bt bt-disable" id="">
							<svg xmlns="http://www.w3.org/2000/svg" class="tools-icon"
								height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF">
								<path d="M0 0h24v24H0V0z" fill="none" />
								<path
									d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z" /></svg>
							<span>新建</span>
						</button>
						<button class="simple-bt bt-disable" id="delete">
							<svg xmlns="http://www.w3.org/2000/svg" class="tools-icon"
								height="26px" viewBox="0 0 24 24" width="26px" fill="#FFFFFF">
								<path d="M0 0h24v24H0V0z" fill="none" />
								<path
									d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.59 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.12 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z" /></svg>
							<span>删除</span>
						</button>
					</div>
					<form id="deleteForm" action="order/delete" method="post">
						<input type="hidden" name="backoption" value="${backoption}">
						<table class="aho-table">
							<tr>
								<th><input type="checkbox" id="toggleAll" <c:if test="${orderSummaries.size() == 0}">disabled="disabled"</c:if> ></th>
								<th data-id="id"><span>ID</span>
								<div></div></th>
								<th data-id="orderNo"><span>订单编号</span>
								<div></div></th>
								<th data-id="nick"><span>昵称</span>
								<div></div></th>
								<th data-id="userId"><span>用户Id</span>
								<div></div></th>
								<th data-id="totalPrice"><span>总价</span>
								<div></div></th>
								<th data-id="totalAmount"><span>总数</span>
								<div></div></th>
								<th data-id="status"><span>订单状态</span>
								<div></div></th>
							</tr>
							<c:forEach items="${orderSummaries}" var="orderSummary">
								<tr data-id="${orderSummary.orderNo}">
									<td><input class="checkbox" type="checkbox"
										name="orderNos" value="${orderSummary.orderNo}"></td>
									<td>${orderSummary.id}</td>
									<td style="min-width: 450px;">${orderSummary.orderNo}</td>
									<td>${orderSummary.nick}</td>
									<td>${orderSummary.userId}</td>
									<td>${orderSummary.totalPrice}</td>
									<td>${orderSummary.totalAmount}</td>
									<td><c:if test="${orderSummary.status == 0}">已提交</c:if><c:if test="${orderSummary.status == 1}">运输中</c:if><c:if test="${orderSummary.status == 2}">已完成</c:if></td>
								</tr>
							</c:forEach>
						</table>
					</form>
					<c:if test="${pages > 1}">
						<div class="pages">
							<ul class="pages-list">
								<c:forEach var="i" begin="1" end="${pages}">
									<li><a
										href="${pageContext.request.contextPath}/admin/panel/order?order=${queryOption.order}&dir=${queryOption.dir}&query=${queryOption.query}&queryType=${queryOption.queryType}&first=${(i-1)*10}"
										<c:if test="${i == currPage }">data-curr</c:if>> ${ i }</a></li>
								</c:forEach>
							</ul>
						</div>
					</c:if>
				</div>
			</div>
		</section>
	</main>
</body>
</html>